<template>
	<div>
		<el-card class="box-card">
			<div class="Serach_b">
				<el-button type="primary" @click="AddClick()">添加</el-button>
				<el-input type="input" autosize placeholder="请输入用户ID" v-model="fy.manageUserId"
					@keyup.enter.native="seachEnter" style="width: 300px;margin-left: 20px;" />
				<el-input type="input" autosize placeholder="请输入用户名" v-model="fy.manageUserName"
					@keyup.enter.native="seachEnter" style="width: 300px;margin-left: 20px;" />

				<el-button type="primary" icon="el-icon-search" @click.native.prevent="SearchData()">
					搜索</el-button>
			</div>
			<el-table :data="UserList" border>
				<el-table-column prop="manageUserId" label="账号ID" />
				<el-table-column prop="manageUserName" label="用户名" />
				<el-table-column prop="nickName" label="账号昵称" />

				<el-table-column prop="emailAddress" label="邮箱地址" />
				<el-table-column label="是否激活">
					<template slot-scope="scope">
						<span v-if="scope.row.isActive == 1">是</span>
						<span v-else>否</span>
					</template>
				</el-table-column>
				<el-table-column label="是否启用">
					<template slot-scope="scope">
						<span v-if="scope.row.enabled == 1">否</span>
						<span v-else>是</span>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="createTime" label="创建时间" /> -->
				<!-- <el-table-column prop="updateTime" label="修改时间" /> -->
				<el-table-column label="操作" width="250px">
					<template slot-scope="scope">
						<div class="button">
							<el-button type="primary" size="mini" @click="UpdateClick(scope.row)">修改</el-button>
							<el-button type="danger" size="mini" @click="DelClick(scope.row)">删除</el-button>
							<el-button type="warning" icon="el-icon-s-tools" size="mini"
								@click="JurisdicClick(scope.row)">分配角色</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<el-dialog title="分配角色" :visible.sync="dialogVisible2" width="30%" :before-close="handleClose">
				<el-radio-group v-model="radio" v-if="dialogVisible2">
					<el-radio v-for="(item, index) in QxList" :key="item.roleKey" :label="item.flag"
						@change="RadioChange(index, item)">{{ item.roleName }}</el-radio>
				</el-radio-group>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible2 = false">取 消</el-button>
					<el-button type="primary" @click="ClickUpdate()">修改</el-button>
				</span>
			</el-dialog>

			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 15]"
				:page-size="fy.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>
		<el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<el-form label-position="left" label-width="80px" :model="ObjectList">
				<el-form-item label="用户名">
					<el-input placeholder="请输入用户名" v-model="ObjectList.manageUserName"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input placeholder="请输入密码" v-model="ObjectList.password"></el-input>
				</el-form-item>
				<el-form-item label="昵称">
					<el-input placeholder="请输入昵称" v-model="ObjectList.nickName"></el-input>
				</el-form-item>
				<el-form-item label="邮箱地址">
					<el-input placeholder="请输入邮箱地址" v-model="ObjectList.emailAddress"></el-input>
				</el-form-item>
				<el-form-item label="头像地址">
					<el-input placeholder="请输入头像地址" v-model="ObjectList.headerUrl"></el-input>
				</el-form-item>
				<el-form-item label="个性签名">
					<el-input placeholder="请输入个性签名" v-model="ObjectList.personContext"></el-input>
				</el-form-item>
				<el-form-item label="是否启用" v-if="this.ObjectList.id">
					<el-select v-model="ObjectList.enabled" placeholder="请选择">
						<el-option v-for="item in enabledList" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="ClickUser()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import * as fpSysUserManApi from "@/api/PublicSearch";
	import * as UserApi from "@/api/Search";
	import {
		timestampToTime
	} from "../../utils/date";
	import * as syUserApi from "@/api/Add";
	export default {
		data() {
			return {
				UserList: [],
				timestampToTime,
				total: 0,
				fy: {
					size: 10,
					current: 1,
					manageUserId: "",
					manageUserName: "",
				},
				dialogVisible: false,
				dialogVisible2: false,
				title: "",
				ObjectList: {
					manageUserName: "",
					password: "",
					nickName: "",
					emailAddress: "",
					headerUrl: "",
					personContext: "",
				},
				enabledList: [{
						label: "是",
						value: 0,
					},
					{
						label: "否",
						value: 1,
					},
				],
				QxList: [],
				radio: true,
				KeyIndex: "",
				userManageId: "",
			};
		},
		methods: {
			seachEnter(e) {
				var keyCode = window.event ? e.keyCode : e.which;
				if (keyCode == 13) {
					this.SearchData(); //搜索按钮的回调
				}
			},
			async RadioChange(index, value) {
				this.QxList.forEach((item) => {
					item.flag = false;
				});
				this.radio = true;
				value.flag = true;
				this.KeyIndex = index;
				this.QxList[index].flag = true;
				// value.flag = true;
			},
			ClickUpdate() {
				fpSysUserManApi
					.UpdateUserID({
						roleKey: this.QxList[this.KeyIndex].roleKey,
						userManageId: this.userManageId,
					})
					.then((res) => {
						if (res.data == true) {
							this.SearchData();
							this.dialogVisible2 = false;
							this.$notify({
								title: "成功",
								message: "修改成功",
								type: "success",
							});
						} else {
							this.dialogVisible = false;
							this.SearchData();
							this.$notify({
								title: "失败",
								message: "修改失败",
								type: "error",
							});
						}
					});
			},
			JurisdicClick(row) {
				this.userManageId = row.manageUserId;
				fpSysUserManApi
					.SsearchUserID({
						userManageId: row.manageUserId
					})
					.then((res) => {
						this.QxList = res.data;
						this.dialogVisible2 = true;
					});
			},
			DelClick(row) {
				this.$confirm("确认删除？")
					.then((_) => {
						syUserApi.DelUser({
							idList: row.id
						}).then((res) => {
							if (res.data == true) {
								this.dialogVisible = false;
								this.SearchData();
								this.$notify({
									title: "成功",
									message: "删除成功",
									type: "success",
								});
							} else {
								this.dialogVisible = false;
								this.SearchData();
								this.$notify({
									title: "失败",
									message: "删除失败",
									type: "error",
								});
							}
						});
						done();
					})
					.catch((_) => {});
			},
			UpdateClick(row) {
				this.dialogVisible = true;
				this.title = "修改管理员信息";
				syUserApi.UpdateUserID({
					id: row.id
				}).then((res) => {
					this.ObjectList = res.data;
				});
			},
			AddClick() {
				this.dialogVisible = true;
				this.title = "新增管理员信息";
				this.ObjectList = {};
			},
			ClickUser() {
				if (this.ObjectList.id) {
					syUserApi.UpdateUser(this.ObjectList).then((res) => {
						if (res.data == true) {
							this.dialogVisible = false;
							this.SearchData();
							this.$notify({
								title: "成功",
								message: "修改成功",
								type: "success",
							});
						} else {
							this.dialogVisible = false;
							this.SearchData();
							this.$notify({
								title: "失败",
								message: "修改失败",
								type: "error",
							});
						}
					});
				} else {
					// this.ObjectList.password = this.encode(this.ObjectList.password);
					syUserApi.AddUser(this.ObjectList).then((res) => {
						if (res.data == true) {
							this.dialogVisible = false;
							this.SearchData();
							this.$notify({
								title: "成功",
								message: "新增成功",
								type: "success",
							});
						} else {
							this.dialogVisible = false;
							this.SearchData();
							this.$notify({
								title: "失败",
								message: "新增失败",
								type: "error",
							});
						}
					});
				}
			},
			SearchData() {
				UserApi.SearchUser(this.fy).then((res) => {
					this.UserList = res.data.records;
					this.total = res.data.total;
				});
			},
			handleSizeChange(value) {
				this.fy.size = value;
				this.SearchData();
			},
			handleCurrentChange(value) {
				this.fy.current = value;
				this.SearchData();
			},
			handleClose(done) {
				this.$confirm("确认关闭？")
					.then((_) => {
						done();
					})
					.catch((_) => {});
			},
		},
		created() {
			this.SearchData();
		},
	};
</script>

<style lang="scss" scoped>
	.box-card {
		margin: auto;
		width: 95%;
		height: 100%;
	}

	.button {
		display: flex;
	}

	.el-table {
		text-align: center;
		// font-size: 10px;
	}

	.el-pagination {
		margin-top: 10px;
	}

	.Serach_b {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.Serach_b .el-button {
		margin-left: 20px;
	}

	.el-textarea {
		margin-left: 20px;
		width: 20%;
	}

	.dialog_div {
		margin-top: 20px;
	}

	.el-input {
		width: 70%;
	}
</style>
